<template>
  <div ref="vantaRef" style="width: 100%; height: 120vh; postion: absolute; top:-50px;">
      <div class="continer">
        <div class="content">
          <p>江苏省淮安市瀚唐OA办公自动化系统</p>
          <p>高效办公  安全协同</p>
          <p>携带在身上的办公平台，可实时查阅待审<br>批流程或文件，审批信息实时反馈至PC端<br>用户。</p>
        </div>
        <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="register-ruleForm">

        <el-form-item prop="name">
          <span class="title"><i class="el-icon-s-opportunity"></i>用户编码</span>
          <el-input class="input" v-model="ruleForm.userCode" placeholder="请输入用户编码"></el-input>
        </el-form-item>
        <el-form-item prop="name">
          <span class="title"><i class="el-icon-s-custom"></i>用户账号</span>
          <el-input class="input" v-model="ruleForm.userName" placeholder="请输入用户账号"></el-input>
        </el-form-item>
        <el-form-item prop="name">
          <span class="title"><i class="el-icon-key"></i>用户密码</span>
          <el-input class="input" v-model="ruleForm.userPassword" placeholder="请输入用户密码"></el-input>
        </el-form-item>

        <el-form-item>
          <router-link to="/myLogin"><p class="loginText">已有账号，立即登录</p></router-link>
        </el-form-item>

        <el-form-item>
          <p class="submitRes">
            <el-button class="submitBtn" @click="submitForm('ruleForm')">Register</el-button>
          </p>
        </el-form-item>
        <el-form-item>
          <p class="resetRes">
            <el-button class="resetBtn" @click="resetForm('ruleForm')">Reset</el-button>
          </p>
        </el-form-item>
      </el-form>
      </div>
  </div>
</template>

<script>
import { register } from '../api/user';
import CLOUDS from "vanta/src/vanta.clouds"//导入动态样式逻辑
import * as THREE from 'three'//导入样式

export default {
  name: 'MyRegister',
  data() {
    return {
      ruleForm: {
        userCode: '',
        userName: '',
        userPassword: '',
      },
      rules: {
        userCode: [
          { required: true, message: '请输入用户编码', trigger: 'blur' },
          { min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' },
        ],
        userName: [
          { required: true, message: '请输入用户账号', trigger: 'blur' },
          { min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' },
        ],
        userPassword: [
          { required: true, message: '请输入用户密码', trigger: 'blur' },
          { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' },
        ],
      },
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          register(this.ruleForm).then(res => {
            console.log(res)
            if (res.code === '0000') {
              this.$router.push('/myLogin')
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
  },
  mounted() {
    this.vantaEffect = CLOUDS({
      el: this.$refs.vantaRef,
      THREE: THREE,
    });
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy();
    }
  },

}
</script>

<style scoped>
.continer{
    position: absolute;
    top: 260px;
    left: 30%;
    width: 750px;
    height: 350px;
    /* background-color: rgba(148, 148, 148, 0.1); */
    background:repeating-linear-gradient(to right,rgba(170, 170, 170,0.8),rgba(255, 255, 255,0.2));
    /* border: 2px solid black; */
    border-radius: 20px;
}
.content p:nth-child(1){
    color: rgb(112, 112, 112);
    font-family: '黑体';
    font-size: 22px;
    font-weight: bold;
    position: relative;
    top: 20px;
    left: 15px;
    opacity: 0.8;
}
.content p:nth-child(2){
    color: rgb(188, 194, 196);
    font-family: '黑体';
    font-size: 18px;
    font-weight: bold;
    position: relative;
    top: 25px;
    left: 15px;
}
.content p:nth-child(3){
    color: white;
    font-family: '黑体';
    font-size: 18px;
    font-weight: bold;
    position: relative;
    top: 25px;
    left: 15px;
}

.register-ruleForm{
  position: absolute;
  top: 25px;
  right: 10px;
  width: 350px;
  height: 300px;
  border: 3px solid white;
  background-color: rgba(207, 207, 204,0.2);
  border-radius: 20px;
}
.title{
  position: relative;
  top: 25px;
  left: -60px;
  color: rgb(134, 131, 131);
  font-size: 16px;
}
i{
  width: 20px;
  height: 20px;
}
.loginText{
  color: white;
  font-size: 12px;
  position: relative;
  top: -10px;
  left: 100px;
}
.loginText:hover{
  color: rgb(248, 199, 125);
}

.input{
  width: 160px;
  position: relative;
  top: 25px;
  left: -30px;
  opacity: 0.5;
}
.input:hover{
  opacity: 1;
}
.submitRes{
  display: inline-block;
  position: relative;
  top: -50px;
  left: -30px;
}
.resetRes{
  display: inline-block;
  position: relative;
  top: -141px;
  left: 90px;
}
.submitBtn{
  width: 100px;
  height: 40px;
  color: black;
  font-size: 16px;
  opacity: 0.5;
}
.submitBtn:hover{
  color: white;
  opacity: 0.8;
  background-color: rgb(245, 201, 134);
}
.resetBtn{
  width: 100px;
  height: 40px;
  color: black;
  font-size: 16px;
  opacity: 0.5;
}
.resetBtn:hover{
  color: white;
  opacity: 0.8;
  background-color: rgb(247, 152, 145);
}
</style>